<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 员工列表</title>
    <link rel="shortcut icon" href="../content/static/img/favicon.ico">
    <link href="../content/css/common_modal.css" rel="stylesheet">
    <link href="../content/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../content/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../content/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../content/js/lib/vue/select2.min.css" rel="stylesheet">
    <link href="../content/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="../content/static/css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="../content/static/css/animate.min.css" rel="stylesheet">
    <link href="../content/static/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="../content/static/css/style.min.css?v=4.0.0" rel="stylesheet">
    <style>
        table-th{
            font-size: 12px;
            font-family: tahoma, "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
            line-height: 1.42857143;
            color: #333;
            background-color: #f5f5f5;
        } table tr{ height:40px;}
    </style>
</head>

<body class="content-container">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <ol class="breadcrumb">
                            <li><a>基本设置</a></li>
                            <li><a>员工列表</a></li>
                        </ol>
                    </div>
                    <div class="content-wrapper">
                        <div class="search-condition">
                            <div>
                                <div class="filter-wrapper">
                                    <ul class="clearfix">
                                        <li class="filter-item ">
                                            <label>员工姓名</label>
                                            <div>
                                                <div class="fill-wrapper">
                                                    <input id="serialNumber" type="text" class="fill-item">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>手机号</label>
                                            <div>
                                                <div class="fill-wrapper">
                                                    <input id="serialNumber" type="text" class="fill-item">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>角色</label>
                                            <div>
                                                <select v-select2 id="role">
                                                    <option value='0'>全部</option>
                                                    <option v-for="item in roleList" v-bind:value="item.Value"
                                                        v-bind:selected="$index===0" v-text="item.Text"></option>
                                                </select>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>所属门店</label>
                                            <div>
                                                <select v-select2 id="shop_search">
                                                    <option v-for="item in shopList" v-bind:value="item.Value" v-bind:selected="$index===0"
                                            v-text="item.Text"></option>
                                                </select>
                                            </div>
                                        </li>
                                        <li class="filter-item">
                                            <label class="checkbox-wrapper" style="width: 140px;"><input class="revision-checkbox"
                                                    type="checkbox" id="isEfficacious" /> 显示锁定员工</label>
                                        </li>
                                        <li class="filter-item">
                                            <a class="revision-btn revision-btn-search">搜索</a>
                                            <a href="javascript:;" class="more">更多<i class="revision-icon-more"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
                            <div class="alert alert-info" style="margin-bottom: 0px">
                                <a class="revision-btn" v-on:click="addShow()">新增</a>
                                <a class="revision-btn-export" v-on:click="lookShow()">导入</a>
                                <a class="revision-btn-import" v-on:click="addShow()">导出</a>
                                <span>总条数：<span>12 条</span>
                            </div>
                        </div>
                        <table class="table table-hover table-bordered">
                            <thead style="background: #f5f5f5;">
                                <tr>
                                    <th>
                                        <input class="revision-checkbox" type="checkbox">
                                    </th>
                                    <th>
                                        <div class="tooltip-demo">用户名
                                            <label class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom"
                                                title="" data-original-title="用户名用于系统登录的账号"></label>
                                        </div>
                                    </th>
                                    <th>员工姓名</th>
                                    <th>角色</th>
                                    <th>性别</th>
                                    <th>手机号</th>
                                    <th>邮箱</th>
                                    <th>状态</th>
                                    <th>地址</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <input class="revision-checkbox" type="checkbox">
                                    </td>
                                    <td>小张总</td>
                                    <td><a href="" data-toggle="modal" data-target="#edit">张三</a></td>
                                    <td class="text-navy">admin</td>
                                    <td>男</td>
                                    <td class="text-navy">15150444723</td>
                                    <td>15150444723@139.com</td>
                                    <td>正常</td>
                                    <td>江苏苏州工业园区88#</td>
                                    <td>
                                        <a href="" class="">编辑</a>
                                        <a href="" class="">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input class="revision-checkbox" type="checkbox">
                                    </td>
                                    <td>小李总</td>
                                    <td><a href="" data-toggle="modal" data-target="#edit">李四</a></td>
                                    <td class="text-navy">销售组</td>
                                    <td>男</td>
                                    <td class="text-navy">15150444723</td>
                                    <td>15150444723@139.com</td>
                                    <td>正常</td>
                                    <td>江苏苏州工业园区88#</td>
                                    <td>
                                        <a href="" class="">编辑</a>
                                        <a href="" class="">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input class="revision-checkbox" type="checkbox">
                                    </td>
                                    <td>王麻子</td>
                                    <td><a href="" data-toggle="modal" data-target="#edit">王总</a></td>
                                    <td class="text-warning">财务组</td>
                                    <td>女</td>
                                    <td class="text-navy">15150444723</td>
                                    <td>15150444723@139.com</td>
                                    <td>正常</td>
                                    <td>江苏苏州工业园区88#</td>
                                    <td>
                                        <a href="">编辑</a>
                                        <a href="">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input class="revision-checkbox" type="checkbox">
                                    </td>
                                    <td>李文明</td>
                                    <td><a href="" data-toggle="modal" data-target="#edit">李文明</a></td>
                                    <td class="text-warning">仓管组</td>
                                    <td>男</td>
                                    <td class="text-navy">15150444723</td>
                                    <td>15150444723@139.com</td>
                                    <td>正常</td>
                                    <td>江苏苏州工业园区88#</td>
                                    <td>
                                        <a href="">编辑</a>
                                        <a href="">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input class="revision-checkbox" type="checkbox">
                                    </td>
                                    <td>赵敏</td>
                                    <td><a href="" data-toggle="modal" data-target="#edit">赵敏</a></td>
                                    <td class="text-warning">采购组</td>
                                    <td>女</td>
                                    <td class="text-navy">15150444723</td>
                                    <td>15150444723@139.com</td>
                                    <td>正常</td>
                                    <td>江苏苏州工业园区88#</td>
                                    <td>
                                        <a href="">编辑</a>
                                        <a href="">删除</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div style="display: none;" v-show="pageInit">
                <!-- 新增弹框 -->
                <modal v-bind:show.sync="addModal.show" v-bind:style="addModal .style" v-bind:add-class="addModal.addClass">
                    <h4 slot="header">新增员工信息</h4>
                    <div slot="body" class="clearfix">
                        <form class="form-horizontal m-t" id="signupForm" novalidate="novalidate">
                            <div>
                                <h3 class="panel-title">员工信息</h3>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">员工姓名</label>
                                <div class="col-sm-4">
                                    <input id="lastname" name="lastname" class="form-control" type="text" aria-required="true"
                                        aria-invalid="false">
                                </div>
                            </div>
                            <div class="form-group" style="margin-top: 15px">
                                <label class="col-sm-2 control-label">工号</label>
                                <div class="col-sm-4">
                                    <input id="firstname" name="firstname" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">所属门店</label>
                                <div class="col-sm-4">
                                    <select v-select2 id="shop">
                                        <option v-for="item in shopList" v-bind:value="item.Value" v-bind:selected="$index===0"
                                            v-text="item.Text"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-4" style="margin: 7px 7px;">
                                    <input type="radio" class="cus-radio" name="status" value="2" checked><span class="spanchk">启用</span>
                                    <input type="radio" class="cus-radio" name="status" value="1"> <span class="spanchk">禁用</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">登录密码</label>
                                <div class="col-sm-4">
                                    <input id="confirm_password" name="confirm_password" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">确认密码</label>
                                <div class="col-sm-4">
                                    <input id="confirm_password" name="confirm_password" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">手机号</label>
                                <div class="col-sm-4">
                                    <input id="password" name="password" class="form-control" type="text">
                                </div>
                                <!-- <button type="button" class="btn btn-outline btn-default" v-on:click="modPhoneShow()">绑定手机号</button> -->
                                <a class="revision-btn-default-send">绑定手机</a>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">邮箱</label>
                                <div class="col-sm-4">
                                    <input id="confirm_password" name="confirm_password" class="form-control" type="text">
                                </div>
                                <!-- <button type="button" style="width: 98px;" class="btn btn-outline btn-default">绑定邮箱</button> -->
                                <a class="revision-btn-default-send">绑定邮箱</a>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">地址</label>
                                <div class="col-sm-8">
                                    <textarea id="ccomment" name="comment" class="form-control" required=""
                                        aria-required="true"></textarea>
                                </div>
                            </div>
                        </form>
                        <form class="form-horizontal m-t" id="signupForm" novalidate="novalidate">
                            <div>
                                <h3 class="panel-title">权限分配</h3>
                            </div>
                            <div class="form-group" style="margin-top: 15px">
                                <label class="col-sm-2 control-label">角色</label>
                                <div class="col-sm-4" style="margin-top: 7px;">
                                    <a href="javascript:;" class="" v-on:click="selectLevelShow()">管理员</a>
                                </div>
                            </div>
                            <div class="form-group" style="margin-top: 15px">
                                <label class="col-sm-2 control-label">关联仓库</label>
                                <div class="col-sm-4" style="padding-left: 9px;margin-top: 7px;">
                                    <input class="revision-checkbox" type="checkbox">#A仓
                                    <input class="revision-checkbox" type="checkbox">#A仓
                                </div>
                            </div>
                            <div class="form-group" style="margin-top: 15px;">
                                <label class="col-sm-2 control-label">价格权限</label>
                                <div class="col-sm-10" style="padding-left: 9px;margin-top: 7px;">
                                    <input class="revision-checkbox" type="checkbox">零售价
                                    <input class="revision-checkbox" type="checkbox">批发价
                                    <input class="revision-checkbox" type="checkbox">参考进货价
                                    <input class="revision-checkbox" type="checkbox">最低售价
                                    <input class="revision-checkbox" type="checkbox">成本价
                                    <input class="revision-checkbox" type="checkbox">等级价
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">状态</label>
                                <div class="col-sm-8" style="margin-top: 7px;">
                                    <input type="radio" class="cus-radio" name="status" value="0" checked><span class="spanchk">正常</span>
                                    <input type="radio" class="cus-radio" name="status" value="1"> <span class="spanchk">锁定</span>
                                    <span class="title-tips" v-if="isShow">* 锁定后将限制员工登录系统</span>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div slot="footer" style="text-align:center">
                        <a href="javascript:;" class="revision-btn"> 保存</a>
                        <a href="javascript:;" class="revision-btn-default" v-on:click="this.addModal.close()"> 取消</a>
                    </div>
                </modal>
                <!-- 更改手机号 -->
                <modal v-bind:show.sync="modPhoneModal.show" v-bind:style="modPhoneModal .style" v-bind:add-class="modPhoneModal.addClass">
                    <h4 slot="header">绑定手机号<span class="title-tips">绑定后可当作用户名登录</span></h4>
                    <div slot="body" class="clearfix">
                        <form class="form-horizontal m-t" id="signupForm" novalidate="novalidate">
                            <div class="form-group" style="margin-top: 15px">
                                <label class="col-sm-2 control-label">新手机号</label>
                                <div class="col-sm-4">
                                    <input id="firstname" name="firstname" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group" style="margin-top: 15px">
                                <label class="col-sm-2 control-label">手机验证码</label>
                                <div class="col-sm-4">
                                    <input id="firstname" name="firstname" class="form-control" type="text">
                                </div><button type="button" class="btn btn-outline btn-default">获取验证码</button>
                            </div>
                        </form>
                    </div>
                </modal>
                <!-- 选择角色 -->
                <modal v-bind:show.sync="selectLevelModal.show" v-bind:style="selectLevelModal .style" v-bind:add-class="selectLevelModal.addClass">
                    <h4 slot="header">选择角色<span class="title-tips">角色可在枚举中新增修改</span></h4>
                    <div slot="body" class="clearfix">
                        <table class="table table-hover table-bordered">
                            <thead>
                                <tr>
                                    <th style="width: 50px;">序号</th>
                                    <th style="width: 70px;">角色名称</th>
                                    <th>角色描述</th>
                                    <th style="width: 50px;">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>销售组</td>
                                    <td>销售组适合销售人员，销售组成员能进行销售、销订、销退、借出、客户管理及商品、库存查询操作。</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="selectShow(123)">选择</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>仓管组</td>
                                    <td>仓管组适合仓库管理人员，仓管组成员能进行订货、进货、进货退货、借入借出、盘点、组装拆卸、库存调拨、出入库管理及查询操作。同时能查看与上述业务相关的报表。</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="selectShow(123)">选择</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>财务组</td>
                                    <td>财务组适合出纳人员，财务组成员能进行与财务相关的所有操作且可以查看经营状况下的所有报表。</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="selectShow(123)">选择</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>查看组</td>
                                    <td>查看组适合公司持股人员，查看组成员能查看系统内所有功能但不能进行任何操作。</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="selectShow(123)">选择</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>采购组</td>
                                    <td>购组适合采购员，采购组成员能进行订货、进货、进货退货、借入、供应商管理及商品、库存查询操作。</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="selectShow(123)">选择</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>6</td>
                                    <td>管理员</td>
                                    <td>管理员是系统内置角色，适合公司老板，管理员拥有系统内所有权限。</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="selectShow(123)">选择</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                    </div>
                </modal>
            </div>
        </div>
        <script src="../content/js/lib/vue/vue.min.js"></script>
        <script src="../content/static/js/jquery.min.js?v=2.1.4"></script>
        <script src="../content/static/js/bootstrap.min.js?v=3.3.5"></script>
        <script src="../content/static/js/plugins/switchery/switchery.js"></script>
        <script src="../content/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
        <script src="../content/static/js/content.min.js?v=1.0.0"></script>
        <script src="../content/js/lib/vue/vue-modal.js"></script>
        <script src="../content/js/lib/vue/vue-pagination.js"></script>
        <script src="../content/js/common.js"></script>
        <script src="../content/js/lib/vue/select2.js"></script>
        <script type="text/javascript">
            $("#role").select2({
                width: "160px"
            });
            $("#shop_search").select2({
                width: "160px"
            });
            var vmData = {
                addModal: {
                    show: false,
                    style: {
                        width: '780px',
                        height: "auto"
                    },
                    addClass: 'scroll-modal',
                    func: {
                        type: Function
                    },
                    close: function () {
                        vm.addModal.show = false;
                    }
                },
                modPhoneModal: {
                    show: false,
                    style: {
                        width: '780px',
                        height: "260px"
                    },
                    func: {
                        type: Function
                    },
                    close: function () {
                        vm.modPhoneModal.show = false;
                    }
                },
                selectLevelModal: {
                    show: false,
                    style: {
                        width: '780px',
                        height: "auto"
                    },
                    func: {
                        type: Function
                    },
                    close: function () {
                        vm.selectLevelModal.show = false;
                    }
                },
                shopList: [{
                        "Value": "1",
                        "Text": "湖东邻瑞店"
                    },
                    {
                        "Value": "2",
                        "Text": "河西XX店"
                    },
                    {
                        "Value": "3",
                        "Text": "新区店"
                    },
                ],
                roleList: [{
                        "Value": "1",
                        "Text": "销售组"
                    },
                    {
                        "Value": "1",
                        "Text": "财务组"
                    },
                    {
                        "Value": "1",
                        "Text": "采购组"
                    },
                ],
                isShow: false,
            };
            vmData = $.extend(vmData, baseData);
            var vmMothod = {
                init: function () {},
                addShow: function () {
                    vm.addModal.show = true;
                    $("#shop").select2({
                        width: "220px"
                    });
                    $("#shop").val('').trigger('change'); //初始化
                    $("input[name=status]").click(function () {
                        if ($(this).val() == 1)
                            vm.$set("isShow", true);
                        else
                            vm.$set("isShow", false);
                    });
                },
                modPhoneShow: function () {
                    vm.modPhoneModal.show = true;
                },
                selectLevelShow: function () {
                    vm.selectLevelModal.show = true;
                },
            };
            vmMothod = $.extend(vmMothod);
            var vm = new Vue({
                el: '.content-container',
                data: vmData,
                methods: vmMothod
            });
            vm.init();
        </script>
</body>

</html>